<template>
  <Header></Header>
  <div class="detail-title">
    <div class="detail-main">
      <div class="detail-map">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>课程</el-breadcrumb-item>
          <el-breadcrumb-item>免费课</el-breadcrumb-item>
          <el-breadcrumb-item>{{ detail.courseName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="detail-name">{{ detail.courseName }}</div>
      <div class="detail-content">难度 入门</div>
    </div>
  </div>
  <div class="detail-container">
    <div class="tab-name">
      <ul>
        <li :class="isActive == 1 ? 'active' : ''" @click="isActive = 1">
          章节
        </li>
        <li :class="isActive == 2 ? 'active' : ''" @click="isActive = 2">
          下载笔记代码
        </li>
      </ul>
    </div>
    <div class="tab-chapters" v-if="isActive == 1">
      <div class="tab-txt">
        <div class="txt-content">
          {{
            detail.bizCourseDetail ? detail.bizCourseDetail : "暂无课程介绍..."
          }}
        </div>
        <div class="txt-btn">
          <div class="payment">立即购买</div>
          <div class="add-cart" @click="addCart">加入购物车</div>
        </div>
      </div>
      <div class="detail-list">
        <div class="item" v-for="item in bizCourseChapters" :key="item.id">
          <div class="item-title">
            <div class="item-name">{{ item.chapterName }}</div>
            <div class="item-key">{{ item.description }}</div>
          </div>
          <ul>
            <li v-for="k in item.children" :key="k.id">
              <div class="course">
                <img src="../assets/img/detail-video.png" />
                <div>视频：{{ k.chapterName }}</div>
              </div>
              <div class="course-video" @click="goPlay(item)">开始学习</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="tab-main" v-if="isActive == 2">
      <ul>
        <li v-for="item in bizCourseAttachments" :key="item.id">
          <div>{{ item.attachmentName }}</div>
          <div class="download" @click="downloadSource(item)">下载资料</div>
        </li>
      </ul>
    </div>
  </div>
  <footer-one></footer-one>
</template>

<script setup>
//引入组件
import Header from "../components/Header/Header.vue";
import Footer from "../components/Footer/FooterOne.vue";
import { getDetail } from "../utils/api/coures";
import { courseCheckAuth, downloadAttachment } from "../utils/api/courseManage";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
//element
import { ArrowRight } from "@element-plus/icons-vue";
import { onBeforeMount, reactive } from "@vue/runtime-core";

import { useRouter } from "vue-router";
// 章节和下载代码的切换
let isActive = ref(1);
// let courseId = route.params.id;
// 路由
let route = useRoute();
let courseId = route.params.id;
// 课程详情数据
let detail = reactive({
  courseName: "",
});
//课程章节
let bizCourseChapters = ref([]);
//课程资料
let bizCourseAttachments = ref([]);
// 生命周期
onBeforeMount(() => {
  getDetail({
    courseId: route.query.id,
  }).then((res) => {
    // console.log(res);
    courseId = res.data.data.id;
    let data = res.data.data;
    detail.courseName = data.courseName;
    detail.bizCourseDetail = data.bizCourseDetail.description;
    bizCourseChapters.value = data.bizCourseChapters;
    bizCourseAttachments.value = data.bizCourseAttachments;
    // console.log("ddadadada", res.data.data);
  });
});

// 下载资料
import { ElMessage } from "element-plus";
//router
let router = useRouter();
//pinia
import { useUserStore } from "../store/user";
// 判断是否是登录状态
const downloadSource = (item) => {
  if (!useUserStore().token) {
    ElMessage.info({
      message: "请先登录",
    });
    router.push("/login");
    return;
  }
  // 如果是登录状态
  courseCheckAuth({ courseId: item.courseId }).then((res) => {
    // 如果没有权限，提醒购买
    if (!res.data.data.hasAuth) {
      ElMessage.info({
        message: "购买该课程才能下载资料",
      });
      return;
    }
    // 有权限
    downloadAttachment({
      courseId: item.courseId,
      attachmentId: item.id,
    }).then((res) => {
      const blob = new Blob([res]);
      let fileName = item.attachmentName;
      let fileUrl = item.attachmentUrl;
      const extName = fileUrl.substring(fileUrl.lastIndexOf("."));
      fileName = fileName + extName;
      const link = document.createElement("a");
      link.download = fileName;
      link.target = "_blank";
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    });
  });
};

// 开始学习
const goPlay = (item, chapterId) => {
  //判断是否是登录状态，如果没有登录，进入登录页面
  if (!useUserStore().token) {
    ElMessage.info({
      message: "请先登录",
    });
    router.push("/login");
    return;
  }
  //如果是登录状态
  courseCheckAuth({
    courseId: item.courseId,
  }).then((res) => {
    //如果没有权限，提醒购买
    if (!res.data.data.hasAuth) {
      ElMessage.info({
        message: "购买该课程才可以下载资料",
      });
      return;
    }
    //有权限
    router.push({
      path: "/course-play/" + item.courseId + "/" + chapterId,
    });
  });
};

import { addShopCar } from "../utils/api/cart";
import { createToken } from "../utils/api/createToken";
// 加入购物车
const addCart = () => {
  createToken().then((res) => {
    let token = res.data.token;
    addShopCar(
      {
        courseId,
        memberId: useUserStore().userInfo.id,
      },
      token
    ).then((res) => {
      if (res.meta.code == "200") {
        ElMessage.success({
          message: "加入购物车成功～",
        });
        return;
      } else {
        ElMessage.info({
          message: "添加失败～该课程已经在购物车中了!",
        });
      }
      // console.log(res.meta.code);
    });
    // console.log(res.meta.code);
  });
};
</script>

<style scoped>
.detail-title {
  width: 100%;
  height: 183px;
  background: url("@/assets/img/detail-bg.png") no-repeat;
  background-size: 100% 100%;
}
.detail-main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 1000px;
  margin: 0 auto;
  height: 100%;
}
::v-deep .el-breadcrumb__separator {
  color: #fff;
}
::v-deep .el-breadcrumb__inner {
  color: #fff;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: #fff;
  font-weight: 500;
}
.detail-name {
  font-size: 27px;
  font-weight: 500;
  color: #ffffff;
}
.detail-content {
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}
.tab-name {
  width: 100%;
  height: 57px;
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}
.tab-name ul {
  display: flex;
  align-items: center;
  height: 57px;
  width: 1000px;
  margin: 0 auto;
  font-size: 16px;
  cursor: pointer;
}
.tab-name ul li + li {
  margin-left: 67px;
}
.tab-name ul li.active {
  position: relative;
  color: #388fff;
  font-weight: bold;
}
.tab-name ul li.active:after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -20%;
  bottom: -6px;
  width: 40%;
  height: 3px;
  background: #388fff;
  border-radius: 1px;
}
.tab-chapters {
  width: 1000px;
  margin: 0 auto;
}
.tab-txt {
  margin: 29px 0;
  width: 100%;
  height: 147px;
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
}
.txt-content {
  padding: 24px 27px;
}
.txt-btn {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.payment {
  margin-right: 13px;
  width: 99px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  background: #f11d1d;
  border-radius: 15px;
}
.add-cart {
  margin-right: 33px;
  width: 99px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #f11d1d;
  background: #fde7e7;
  border-radius: 15px;
}
.detail-list {
  margin-top: 30px;
}
.item {
  margin-bottom: 10px;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.09);
  border-radius: 5px;
}
.item-title {
  padding: 16px 27px;
}
.item-name {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.item-key {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #5c5c5c;
}

.item ul li {
  display: flex;
  justify-content: space-between;
  padding: 16px 27px;
}
.item ul li .course {
  display: flex;
}
.course {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.course img {
  width: 13px;
  height: 11px;
  margin-right: 7px;
}
.course-video {
  width: 73px;
  height: 20px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  background: #388fff;
  border-radius: 8px;
  cursor: pointer;
}
.tab-main {
  width: 1000px;
  margin: 0 auto;
}
.tab-main ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tab-main ul li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 10px 0;
  line-height: 35px;
  font-size: 14px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 9%);
}
.download {
  width: 100px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  cursor: pointer;
}
</style>
